<template>
	<!-- :style="[background]" -->
	<view class="user" >
		<!-- #ifndef  H5 -->
		<!-- <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
			<u-navbar :is-back="false" title="个人中心" :title-bold="true" :is-fixed="false" :border-bottom="false"
				:background="{ background: 'rgba(256,256, 256,' + navBg + ')' }"
				:title-color="navBg > 0.5 ? '#000' : '#fff'"></u-navbar>
		</u-sticky> -->
		<!-- #endif -->
		<view class="header">
			<view class="hd-wrap">
				<view class="user-info flex row-between">
					<router-link to="/bundle/pages/user_profile/user_profile">
						<view class="info flex" style="align-items: flex-start;">
							<image class="avatar m-r-20 flex-none"
								:src="isLogin ? userInfo.avatar : '/static/images/portrait_empty.png'" />
							<view v-if="isLogin">
								<view class="name flex">
									<view class="xxl bold line-2">{{userInfo.nickname}}</view>
									<view class="level br60 m-l-10 flex-none flex" v-if="userInfo.vip">
										<text class="m-r-10">
											<text class="v xxl m-r-4">v</text>
											<text class="xxs">{{userInfo.vip}}</text>
										</text>
										<text class="xxs">{{userInfo.level_name}}</text>
									</view>
								</view>
								<view class="flex m-t-10" v-if="userInfo.sn">
									<image src="../../static/images/百分比.png" mode="" style="width:32rpx;height:32rpx;"></image>
								<!-- <view class="user-id xs m-r-20">会员ID: {{userInfo.sn}}</view> -->
								<!-- <view class="xs primary row-center m-l-5" @tap.stop="onCopy">复制</view> -->
								</view>
							</view>
							<view v-else>
								<view style="font-size: 42rpx">点击登录</view>
								<view class="sm m-t-10 lighter">登录体验更多功能</view>
							</view>
						</view>
					</router-link>
					<!-- 头像右边设置按钮 -->
<!-- 					<view class="flex m-l-20">
						<router-link to="/bundle/pages/user_profile/user_profile">
							<view class="user-opt">
								<image style="width:58rpx;height: 58rpx;" src="/static/images/icon_my_setting.png">
								</image>
							</view>
						</router-link>
					</view> -->
				</view>
			<!-- 	<view class="user-assets flex m-t-20 m-b-20">
					<router-link class="user-assests-item" to="/bundle/pages/user_wallet/user_wallet">
						<view class="flex-col col-center">
							<view class="xl primary">
								{{userInfo.user_money || 0}}
							</view>
							<view class="sm m-t-10">
								余额
							</view>
						</view>
					</router-link>
					<router-link class="user-assests-item" to="/bundle/pages/user_collect/user_collect">
						<view class="flex-col col-center">
							<view class="xl primary">
								{{userInfo.collect || 0}}
							</view>
							<view class="sm m-t-10">
								收藏
							</view>
						</view>
					</router-link>
					<router-link class="user-assests-item" to="/bundle/pages/user_coupon/user_coupon">
						<view class="flex-col col-center">
							<view class="xl primary">
								{{userInfo.coupon || 0}}
							</view>
							<view class="sm m-t-10">
								优惠券
							</view>
						</view>
					</router-link>
				</view> -->
			</view>
		</view>
 <view class="" style="position:relative;">
 	<image style="width: 100%;" src="../../static/images/partner-img.png" mode="widthFix"></image>
	<text style="position:absolute;right:48rpx;bottom:28rpx;color:#fff;font-size: 12px;">马上点击领取>></text>
 </view>
		<view class="order-nav  p-20" style="margin: 0rpx;">
			<!-- <view class="flex-content bg-white" style="width: 100%; height: 100%;box-shadow: 1rpx 1rpx 10rpx #747474 ; border-radius: 10rpx;"> -->
			<view class="flex-content bg-white" style="width: 100%; height: 100%;border-radius: 10rpx;justify-content:flex-start">
				<view class=" flex" style="padding-left:48rpx;" >
				
					<view class="mylist" style="margin-left: 48rpx;" v-for="(item,index) in myuseList" :key="index">
						<navigator :url="item.link" hover-class="none">
						<view class="flex-content">
						<image style="width: 60rpx;" :src="item.image" mode="widthFix"></image>
							</view>
							<view class="">
								{{item.name}}
							</view>
							</navigator>
					</view>
				</view>
			</view>

		</view>
		<view class="server-nav " ></view>
		<view class="nav m-t-20 m-l-20 m-r-20" style="border-radius: 20rpx; overflow: hidden;">
			
			<view v-for="(item, index) in menuList.portablelist" :key="index" class="item-btm   bg-white  flex row-between col-center "
				 @tap="menuJump(item)">
				<view class=" m-l-24 flex col-center">
					<image class="nav-icon" :src="item.image"></image>
					<view class="m-l-34" style="color: #666666;">{{item.name}}</view>
				</view>
				<view class="m-r-50"><u-icon name="arrow-right " size="28" color="#959595"></u-icon></view>
			</view>
		</view>
		<!-- <goods-column ref="mescrollItem"></goods-column> -->
	</view>
</template>

<script>
	import MescrollCompMixin from "@/components/mescroll-uni/mixins/mescroll-comp";
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getMenu
	} from '@/api/store'
	import {
		toLogin
	} from '@/utils/login'
	import {
		menuJump,
		copy
	} from '@/utils/tools'
	import Cache from '@/utils/cache'
	const app = getApp()
	export default {
		mixins: [MescrollCompMixin],
		data() {
			return {
				showNav: false,
				navBg: 0,
				myuseList:[
					{
						image:"/static/images/if-money.png",
						is_tab:0,
						link:"/bundle/pages/user_wallet/user_wallet",
						link_type:1,
						name:"我的钱包"	
					},
					{
						image:"/static/images/if-royal.png",
						is_tab:0,
						link:"/bundle/pages/user_spread/user_spread",
						link_type:1,
						name:"我的特权"
						
					},
					{
						image:"/static/images/iconPark-ticket.png",
						is_tab:0,
						// /bundle/pages/user_coupon/user_coupon
						link:"/bundle/pages/user-preferential/user-preferential",
						link_type:1,
						name:"优惠券"	
					},

					 // {
					 // 	image:"/static/images/if-medal.png",
					 // 	is_tab:0,
					 // 	link:"/bundle/pages/user_spread/user_spread",
					 // 	link_type:1,
					 // 	name:"邀请有奖"
					 	
					 //  },
				
				],
				menuList:{
					portablelist:[
						
										
						{
							image:"/static/images/riFill-service-fill.png",
							is_tab:0,
							// link:"/bundle/pages/dr_apply/dr_apply",
							link:"/bundle/pages/verification_code/verification_code",							
							link_type:1,
							name:"司机入驻"	
						},
						{
							image:"/static/images/if-handshake-deal.png",
							is_tab:0,
							link:"/bundle/pages/store_settled/store_settled",
							link_type:1,
							name:"加盟代理"	
						},
						{
							image:"/static/images/riLine-zcool-line.png",
							is_tab:0,
							link:"/bundle/pages/longterm-business/longterm-business",
							link_type:1,
							name:"长期业务"	
						},
						{
						image:"/static/images/iconPark-editor.png",
						is_tab:0,
						link:"/bundle/pages/advice/advice",
						link_type:1,
						name:"意见反馈"	
						},
						{
						image:"/static/images/if-steering.png",
						is_tab:0,
						link:"bundle/pages/user_collect/user_collect",
						link_type:1,
						name:"收藏司机"
						},
						{
						image:"/static/images/if-map-pins.png",
						is_tab:0,
						link:"/bundle/pages/common_route/common_route",
						link_type:1,
						name:"常用路线"
						},
						// {
						// image:"/static/images/tast-icon.png",
						// is_tab:0,
						// link:"/bundle/pages/carry_pool/carry_pool",
						// link_type:1,
						// name:"任务池"
						// },
						// {
						// image:"/static/images/carry-icon.png",
						// is_tab:0,
						// link:"/bundle/pages/carry_list/carry_list",
						// link_type:1,
						// name:"搬运列表"
						// },
						{
						image:"/static/images/riLine-booklet-line.png",
						is_tab:0,
						link:"/bundle/pages/user_address/user_address",
						link_type:1,
						name:"地址簿"
						},
						{
						image:"/static/images/if-support.png",
						is_tab:0,
						link:"/bundle/pages/contact_offical/contact_offical",
						link_type:1,
						name:"客服中心"
						},
					]
				},
			};
		},

		onLoad(options) {
			this.getMenuFun();
		},

		onShow() {
			this.getUser();
			this.getCartNum()
	
		},

		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e
			let percent = scrollTop / top > 1 ? 1 : scrollTop / top
			this.navBg = percent
		},
		onPullDownRefresh() {
			this.getUser().then(() => {
				uni.stopPullDownRefresh();
			})
			this.getMenuFun();
		},
		onShareAppMessage() {
			const shareInfo = this.appConfig.share
			return {
				title: shareInfo.mnp_share_title,
				path: "pages/index/index?invite_code=" + this.inviteCode
			};
		},
		methods: {
			...mapActions(['getCartNum', 'getUser']),
			goLogin() {
				let {
					isLogin
				} = this;
				if (isLogin) {
					uni.navigateTo({
						url: '/bundle/pages/user_profile/user_profile'
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},

			goPage(url) {
				if (!this.isLogin) return toLogin()
				uni.navigateTo({
					url
				});
			},
			async getMenuFun() {
				const {
					data,
					code
				} = await getMenu({
					type: 2,
				})
				if (code == 1) {
					// this.menuList = data
				}
			},
			onCopy(e) {
				copy(this.userInfo.sn)
			},
			menuJump(item) {
				menuJump(item)
			}
		},
		computed: {
			...mapGetters(["userInfo", "inviteCode", 'appConfig']),
			background() {
				const {
					center_setting
				} = this.appConfig
				return center_setting.top_bg_image ? {
					'background-image': `url(${center_setting.top_bg_image})`
				} : {}
			},
		}
	};
</script>
<style lang="scss" scoped>
	.user {
		
		// background-image: url(../../static/images/my_topbg.png);
		background-size: 100% auto;
		background-repeat: no-repeat;

		.header {
			margin: 0 20rpx;
			padding-top: 20rpx;

			.hd-wrap {
				padding-bottom: 20rpx;
				border-radius: 20rpx;
			}

			.user-info {
				padding: 30rpx;

				.avatar {
					height: 110rpx;
					width: 110rpx;
					border-radius: 50%;
					overflow: hidden;
				}

				.name {
					text-align: left;
					margin-bottom: 5rpx;
				}

				.user-id {
					border: $-solid-border;
					border-radius: 100rpx;
					padding: 2rpx 15rpx;
					
				}

				.user-opt {
					position: relative;

					.dot {
						position: absolute;
						background-color: #ee0a24;
						border: 2rpx solid #FFFFFF;
						color: $-color-primary;
						border-radius: 100%;
						top: 6rpx;
						right: 0rpx;
						font-size: 22rpx;
						min-width: 16rpx;
						height: 16rpx;
					}
				}

				.level {
					background: #333;
					padding: 0 15rpx;
					color: #ffdea5;
					line-height: 40rpx;

					.v {
						font-style: italic;
					}
				}
			}

			.user-assets {
				flex: 1;

				.user-assests-item {
					flex: 1;
				}
			}

		}

		.order-nav {
			.icon-contain {
				position: relative;
			}
		}

		.order-nav,
		.my-assets {
			margin: 20rpx 20rpx 0;
			border-radius: 8rpx;
		}

		.server-nav {
			margin: 20rpx;
			border-radius: 8rpx;
		}

		.title {
			height: 88rpx;
			padding: 0 30rpx;
			border-bottom: $-dashed-border;
		}

		.nav {
			margin-bottom: 40rpx;
			.assets-item {
				flex: 1;
			}

			.item {
				width: 25%;
			}

			.badge {
				padding: 0 6rpx;
				min-width: 28rpx;
				height: 28rpx;
				border-radius: 28rpx;
				box-sizing: border-box;
				border: 1rpx solid $-color-primary;
				color: $-color-primary;
				position: absolute;
				left: 33rpx;
				top: -10rpx;
				z-index: 2;
			}

			.nav-icon {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
	.mylist:first-child{
		margin-left: 0rpx !important;
	}
	.item-btm{
		height: 112rpx;
		width: 100%;
		background-color: #FFFFFF;
		border-bottom: 2rpx solid #EEEEEE;
	}
	.item-btm:last-child{
		border: none !important;
	}
	.order-nav{
		width: 100%;
		height: 202rpx;
	}
</style>
